<template>
  <div class="vuefinder__pdf-preview">
    <h3
      class="vuefinder__pdf-preview__title"
      id="modal-title"
      :title="app.modal.data.item.path"
    >
      {{ app.modal.data.item.basename }}
    </h3>
    <div>
      <!-- 加载状态 -->
      <object
        class="vuefinder__pdf-preview__object"
        :data="getUrl()"
        type="application/pdf"
        width="100%"
        height="100%"
      >
        <iframe
          v-if="getUrl()"
          :src="getUrl()"
          frameborder="0"
          class="vuefinder__pdf-preview__iframe"
          width="100%"
          height="100%"
        />
      </object>
    </div>
  </div>
</template>

<script setup>
import { inject, onMounted } from 'vue'

const app = inject('ServiceContainer')

const emit = defineEmits(['success'])
const getUrl = () => {
  return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
    app.modal.data.item.url
  )}`
}

onMounted(() => {
  emit('success')
})
</script>
